<template>
	<view class="title1">
		<text style="margin:0 30rpx;">{{info.name}}</text>
		<text>{{info.tel}}</text>
	</view>
	<view class="orderInfo">
		<view class="">
			<view class="order1">
				<text style="margin:0 30rpx;">体检机构:</text>
				<text>{{info.institution}}</text>
			</view>
			<view class="order1">
				<text style="margin:0 30rpx;">体检时间:</text>
				<text>{{info.date}}</text>
			</view>
		</view>
	</view>
	<view style="width: 750rpx;height: 20rpx;background-color: #eee;"></view>
	<view style="width: 750rpx; height: 600rpx;">
		<view style="width: 750rpx;height: 70rpx;line-height: 70rpx;font-size: 28rpx;border-bottom: #eee 1rpx solid;">
			<text style="margin:0 30rpx;">订单号:</text>
			<text>{{info.orderNumber}}</text>
		</view>
		<view style="width: 750rpx;height: 70rpx;line-height: 70rpx;font-size: 28rpx;border-bottom: #eee 1rpx solid;">
			<text style="margin:0 30rpx;">{{info. orderName}}</text>
			<text style="float: right;margin-right: 30rpx;">￥{{info.orderPrice}} ></text>
		</view>
		<view style="width: 750rpx;height: 70rpx;line-height: 70rpx;font-size: 28rpx;border-bottom: #eee 1rpx solid;"
			v-for="v in info.addExam">
			<text style="margin:0 30rpx;">{{v.addName}}</text>
			<text style="float: right;margin-right: 30rpx;">￥{{v.addPrice}} ></text>
		</view>
		<view style="width: 750rpx;height: 70rpx;line-height: 70rpx;font-size: 28rpx;border-bottom: #eee 1rpx solid;">
			<text style="margin:0 30rpx; color: red;">合计</text>
			<text style="float: right;margin-right: 30rpx; color: red;">￥{{info.sum}} ></text>
		</view>
	</view>
	<button class="addButton">我要加项</button>
	<view
		style="position: fixed;bottom: 0;height: 96rpx;width: 750rpx;display: flex;flex-direction: row; border-top: green 1rpx solid;">
		<view class="addButton1">取消预约</view>
		<view class="addButton2">
			<picker mode="date" :value="chooseDate" :start="startDate" :end="endDate">
				<view class="uni-input">修改时间</view>
			</picker>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	let getDate = (type) => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	const chooseDate = getDate({ format: true })
	const startDate = getDate('start')
	const endDate = getDate('end')
	const info = reactive({
		name: '谭正旺',
		tel: '19150191050',
		institution: '广州体育中心体检中心',
		date: '2023-08-15',
		orderNumber: '1254676',
		orderName: '老年人体检套餐豪华版',
		orderPrice: '800',
		addExam: [
			{ addName: '脑部CT', addPrice: '300' },
			{ addName: '脑部CT', addPrice: '300' },
			{ addName: '脑部CT', addPrice: '300' },
		],
		sum: '1600'
	})
</script>

<style lang="less" scoped>
	.title1 {
		width: 750rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-bottom: #eee 1rpx solid;
	}

	.orderInfo {
		width: 750rpx;
		height: 140rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		.order1 {
			width: 750rpx;
			height: 50rpx;
			font-size: 28rpx;
		}
	}

	.addButton {
		width: 430rpx;
		height: 96rpx;
		border: green 1rpx solid;
		border-radius: 10rpx;
		color: green;
		background-color: #fff;
	}

	.addButton1 {
		width: 377rpx;
		height: 96rpx;
		color: green;
		outline: none;
		text-align: center;
		line-height: 96rpx;
	}

	.addButton2 {
		width: 377rpx;
		height: 96rpx;
		color: green;
		outline: none;
		background-color: green;
		color: white;
		text-align: center;
		line-height: 96rpx;
	}
</style>